<template>
	<view class="s-m-box">
		<view class="s-box" @click="show('show', storesList, curStore)">{{ curStore.name }}<text
				class="icon-font arrow-xiala-font">&#xe618;</text></view>
		<view class="s-box" @click="show('show', ucpList, curUcp)">{{ curUcp.name }}<text
				class="icon-font arrow-xiala-font">&#xe618;</text></view>
		<view class="s-box" @click="show('show', timeGroup, curTime)">{{ curTime.name }}<text
				class="icon-font arrow-xiala-font">&#xe618;</text></view>
		<view class="good-mask mask-top" :style="!isExpand ? 'margin-left: 72px; width: calc(100% - 68px)' : ''"
			:class="state === 0 ? 'none' : state === 1 ? 'show' : ''" @click="show">
			<view class="cate-content">
				<scroll-view scroll-y class="c-list comm-list">
					<view v-for="item in list" :key="item.id">
						<view class="cate-item" :class="curItem.id == item.id ? 'cate-item-s' : ''"
							@click="changItem(item)">{{ item.name }}<text class="icon-font selected-icon"
								v-show="curItem.id == item.id">&#xe636;</text></view>
					</view>
				</scroll-view>
			</view>
		</view>
		<dateWin ref="dateWin" @selectDate="selectDate"></dateWin>
	</view>
</template>

<script>
import lang from "../../../js/conf/Lang.js";
import dateWin from "../../comm/DateWin.vue";
import { mapGetters } from "vuex";
export default {
	computed: {
		...mapGetters(["isExpand"]),
	},
	components: { dateWin },
	data() {
		return {
			curItem: {},
			list: [],
			state: 0,

			curStore: { name: lang.report.allStoresTxt, id: "", type: 1 },
			storesList: [],

			curUcp: { name: lang.report.allSafftiTxt, id: "", type: 2 },//当前经手人
			ucpList: [],

			curTime: { name: lang.report.allTimeTxt, id: "", type: 3 },
			//1 日报 2月报 3季报  5 自定义
			timeGroup: [
				{
					name: lang.report.allTimeTxt,//1 日报 2月报 3季报  5 自定义
					id: "",
					type: 3
				},
				{
					name: lang.report.dayTxt,//1 日报 2月报 3季报  5 自定义
					id: 1,
					type: 3,
				},
				{
					name: lang.report.moonTxt,//1 日报 2月报 3季报  5 自定义
					id: 2,
					type: 3,
				},
				{
					name: lang.report.seasonsTxt,//1 日报 2月报 3季报  5 自定义
					id: 3,
					type: 3,
				},
				{
					name: lang.report.customTxt,//1 日报 2月报 3季报  5 自定义
					id: 5,
					type: 3,
					st: "",
					et: "",
				},
			],
			toTxt: lang.saleReport.toTxt,
		}
	},
	methods: {
		initData(data) {
			this.storesList = [{ name: lang.report.allStoresTxt, id: "", type: 1 }];
			if (data.store_ls) {
				let arr = this.getListArr(data.store_ls, 1);
				this.storesList = this.storesList.concat(arr);
			}
			this.ucpList = [{ name: lang.report.allUcpTxt, id: "", type: 2 }];
			if (data.staff_ls) {
				let arr = this.getListArr(data.staff_ls, 2);
				this.ucpList = this.ucpList.concat(arr);
			}
		},

		getListArr(arr, type) {
			let len = arr.length;
			let tempArr = [];
			for (let i = 0; i < len; i++) {
				let o = arr[i];
				let temp = {};
				temp.name = o.name;
				temp.id = o.id;
				temp.type = type;
				tempArr.push(temp);
			}
			return tempArr;
		},

		show(type, arr, cItem) {

			if (type == "show") {
				this.curItem = cItem;
				this.list = arr;
			}
			let timer = type === 'show' ? 10 : 200;
			let state = type === 'show' ? 1 : 0;
			this.state = 2;
			setTimeout(() => {
				this.state = state;
			}, timer);
		},
		changItem(item) {
			if (item.type == 1) {
				this.curStore = item;
			}
			else if (item.type == 2) {
				this.curUcp = item;
			}
			else if (item.type == 3) {
				if (item.id == 5) {
					this.$refs.dateWin.show("show");
					return;
				}
				else {
					this.curTime.name = item.name;
					this.curTime.id = item.id;
					this.curTime.st = "";
					this.curTime.et = "";
				}
			}
			let data = {};
			data.curStore = this.curStore;
			data.curUcp = this.curUcp;
			data.curTime = this.curTime;
			this.$emit("loadData", data);
		},

		/***选择自定义时间*****/
		selectDate(st, et) {
			let data = {};
			this.curTime.id = 5;
			this.curTime.st = st;
			this.curTime.et = et;
			data.curStore = this.curStore;
			data.curUcp = this.curUcp;
			data.curTime = this.curTime;
			this.curTime.name = st + this.toTxt + et;
			this.$emit("loadData", data);
		},
	}
}
</script>

<style lang="scss">
.s-m-box {
	padding: 0 80px;
	height: 40px;
	width: calc(100% - 160px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px #EDEDED solid;
	background-color: #EEE;
	position: relative;

	.s-box {
		cursor: pointer;
		width: 33%;
		text-align: center;
	}

	.mask-top {
		top: 94px;
		width: calc(100% - 160px);
		margin-left: 240px;
		z-index: 999;

		.cate-content {
			.c-list {
				max-height: 384px;

				.cate-item {
					color: #333;
					padding: 5px;
					border-bottom: 1px #F1F1F1 solid;
					position: relative;
					cursor: pointer;

					.selected-icon {
						position: absolute;
						color: #3388ff;
						right: 100px;
						top: -10px;
						font-size: 30px;
					}
				}

				.cate-item-s {
					color: #3388ff;
					background-color: #dFdFdF;
				}
			}
		}
	}
}
</style>
